import CodeSandboxEmbed from './jsx/utils/CodeSandboxEmbed.js';
import { HelloWorld, CustomObject, ColorfulKnot, InstancedRendering } from './jsx/allLiveEditors';

# Rendering Objects

In this step, you'll learn how to:

- Build a Hello World app with Worldview
- Render objects with custom position, color, and scale
- Apply math equation to the rendered objects
- Use instanced rendering

## Building a Hello World App

Add `regl-worldview` to your [package dependencies](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file), for instance by running `npm install regl-worldview`:

```json
"regl-worldview": "latest"
```

Create a new file titled `Example.js` in the `src/` directory, and add the code below which uses the Worldview component to render a red cube, x/y/z axes, and "Hello, Worldview!" text.

```js
// src/Example.js
import React from "react";
import Worldview, { Cubes, Axes, Text } from "regl-worldview";

export default function Example() {
  return (
    <Worldview>
      <Cubes>
        {[
          {
            pose: {
              orientation: { x: 0, y: 0, z: 0, w: 1 },
              // position the cube at the center
              position: { x: 0, y: 0, z: 0 },
            },
            scale: { x: 10, y: 10, z: 10 },
            // rgba values are between 0 and 1 (inclusive)
            color: { r: 1, g: 0, b: 0, a: 1 },
          },
        ]}
      </Cubes>
      <Axes />
      <Text autoBackgroundColor>
        {[
          {
            text: "Hello, Worldview! ",
            color: { r: 1, g: 1, b: 1, a: 1 },
            pose: {
              orientation: { x: 0, y: 0, z: 0, w: 1 },
              position: { x: 0, y: 5, z: 10 },
            },
            scale: { x: 1, y: 1, z: 1 },
          },
        ]}
      </Text>
    </Worldview>
  );
}
```

Replace the contents of `src/index.js` with the following code to render your `Example` component:

```js
// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import Example from "./Example";

function App() {
  return (
    {/* set the Worldview container to 100% view height and view width so it covers the whole screen */}
    <div style={{ width: "100vw", height: "100vh" }}>
      <Example />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```

Check your browser to see the results – you have successfully created a Hello World app using Worldview!

<HelloWorld />

You can interact with Worldview by left-clicking and dragging to move the scene, or right-clicking and dragging to rotate. Learn more about [controlling the camera with your keyboard](#/docs/api/worldview/keyboard-controls).

## Controlling Objects' Position, Size, and Color

Let's make the app dynamic by adding a button which adds more cubes to the scene.

Whenever you click the "Add a Cube" button, you'll see a new cube with a randomly generated color added to the scene.

<CustomObject />

## Rendering a Colorful Knot

Now let's render something more interesting!

A [trefoil knot](https://en.wikipedia.org/wiki/Trefoil_knot) is like a common overhand knot with its two loose ends joined, resulting in a knotted loop. In this step, we'll use parametric equations to render a trefoil knot with some color variation.

<ColorfulKnot />

## Improving Performance with Instanced Rendering

When drawing many instances of the same object, you'll quickly reach a performance bottleneck with the number of GPU calls. [Instancing](https://learnopengl.com/Advanced-OpenGL/Instancing) allows us to draw many objects at once with a single render call, saving us valuable CPU–GPU communication time.

Most of the existing [Commands](#/docs/api/command) support instancing. They accept one marker object with certain properties as arrays (e.g. points, colors) which will be rendered to many objects. In this step, let's convert our previous example to use instanced rendering.

<InstancedRendering />
Now, we are rendering 500 spheres with unique colors and positions in a single GPU draw call, rather than 500 separate calls!

Next: [Managing the Camera](#/docs/tutorial/managing-the-camera)
